import React, { useState, useEffect, Fragment, useRef, useImperativeHandle } from 'react';

// import { Form, Input, Button, Checkbox, Select  } from 'antd';
// const { Option } = Select;
function Form(props, ref) {
    const formRef = useRef()

    console.log("00",props.children)
      useEffect(() => {
        console.log(formRef.current)
        formRef.current.setAttribute('type', 'button')

        if(document.getElementsByTagName('button').length) {  // 清楚 form 表单默认事件
            document.getElementsByTagName('button').forEach(item => item.setAttribute("type", 'button'))
        }

        if(document.getElementsByTagName('input').length) {  // 清楚 form 表单默认事件
           document.getElementsByTagName('input').forEach(item => console.log("input：", item.value ))
        }

      }, [props.children])

    useImperativeHandle(ref, () => ({
        onFinish: formRef.current.a = function () {
            console.log("11")
        },
        resetFields: formRef.current.a = function () {
            console.log("22")
        },
        getFieldsValue: () => {
            let a = Math.random()
            // props.onFinish(a)
            // console.log("sub")
            return a
        }
        
    }))

    console.log(props,'ddddddddd')

    return (
        <div>
            <form ref={formRef} >
            {React.Children.map(props.children, (child, index) => {
                console.log(child.props,index,'333')
                  return React.cloneElement(child)
                    // return React.cloneElement(child, {
                    //     isSelected: index === context.selectedIndex
                    // });
              })}
            </form>





            {/* <Form>
            {props.form && props.form.map((item, index) => (
                <Form.Item key={index} >
                    { item.type === 'input' && <Fragment> 是input, <Input /> </Fragment> }
                    { item.type === 'select' && 
                    <Fragment> 
                        <Select>
                            {item.value.length && item.value.map((item_select, index_select) => (
                                <Option key={index_select} value={item_select.id} > {item_select.name } </Option>
                            ))}
                        </Select>
                    </Fragment> }
                </Form.Item>
            ))}
        </Form> */}
        </div>
    )
}


export default React.forwardRef(Form)